
import styled from 'styled-components';
import React, { CSSProperties, useEffect, useState } from 'react';
import { Card, Switch, Descriptions } from 'antd';
import APP_LOGO from '../../../assets/react.svg';

import { Application, ApplicationCategory, appstoreGetCategories, appstoreQueryApplicationById, qiniuGetUrl } from '../../../services';
import { ImageList } from '../../../components';
import { MyApplicationEditor } from './my-application-editor';

export interface MyApplicationDetailProps {
    style?: CSSProperties;
    item: Application;
    categories: Array<ApplicationCategory>;
}

export const MyApplicationDetail: React.FC<MyApplicationDetailProps> = (props: any) => {

    const [isEdit, setIsEdit] = useState<boolean>(false);

    const [application, setApplication] = useState<Application>(props.item);

    useEffect(() => {
        if (props.item)
            setApplication(props.item);
    }, [props.item]);

    return (
        <DetailContainer style={props.style}>
            <DetailSwitch>
                <Switch checkedChildren="编辑" unCheckedChildren="查看" value={isEdit}
                    onChange={async (checked: boolean) => {
                        let app = await appstoreQueryApplicationById(application.identifier);
                        if (app) {
                            setApplication(app);
                        }
                        setIsEdit(checked);
                    }}></Switch>
            </DetailSwitch>
            {
                isEdit ? (
                    <MyApplicationEditor style={{
                        flex: 1
                    }}
                        item={application}
                        categories={props.categories}
                        onFinish={async () => {
                            let app = await appstoreQueryApplicationById(application.identifier);
                            if (app) {
                                setApplication(app);
                            }
                            setIsEdit(false);
                        }}
                    >
                    </MyApplicationEditor>
                )
                    : (
                        <MyApplicationView style={{
                            flex: 1
                        }}
                            item={application}
                            categories={props.categories}>
                        </MyApplicationView>
                    )
            }
        </DetailContainer>
    );

}

const DetailContainer = styled.div`
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
`;

const DetailSwitch = styled.div`
    width: 100%;
    height: 40px;
    display: flex;
    justify-content: flex-end;
`;



export interface MyApplicationViewProps {
    style?: CSSProperties;
    item: Application;
    categories: Array<ApplicationCategory>;
}

export const MyApplicationView: React.FC<MyApplicationViewProps> = (props: any) => {
    const [icon, setIcon] = useState<string>(APP_LOGO);

    const [images, setImages] = useState<Array<string>>([]);

    useEffect(() => {
        //
        qiniuGetUrl([props.item.icon]).then((url) => {
            console.log(url);
            if (url && url.length > 0) {
                setIcon(url[0]);
            }
        });
    }, [props.item.icon]);

    useEffect(() => {
        //
        qiniuGetUrl(props.item.images).then((url) => {
            console.log(url);
            if (url && url.length > 0) {
                setImages(url);
            }
        });
    }, [props.item.images]);

    if (!props.item) {
        return (
            <EmptyContainer style={props.style}>
                没有找到相关数据~
            </EmptyContainer>
        );
    }

    return (
        <Container style={props.style}>
            <Descriptions
                title={<Title>
                    <Icon src={icon}></Icon>
                    {props.item.name}
                </Title>}
                layout={'horizontal'}
                column={1}>
                <Descriptions.Item label="分类">{props.categories.filter((category) => {
                    return (props.item.categories & category.code) === category.code;
                }).map((category, index) => {
                    return (
                        <CategoryItem key={'category_' + index}>
                            {category.name}
                        </CategoryItem>
                    );
                })}</Descriptions.Item>
                <Descriptions.Item label="发布人">{props.item.userId}</Descriptions.Item>
                <Descriptions.Item label="标识">{props.item.identifier}</Descriptions.Item>
                <Descriptions.Item label="版本">{props.item.version}</Descriptions.Item>
                <Descriptions.Item label="下载地址">{props.item.download}</Descriptions.Item>
                <Descriptions.Item label="应用简介">{props.item.description}</Descriptions.Item>
                <Descriptions.Item label="效果图片">
                    {
                        images && (
                            <ImageList images={images.map((image, index) => {
                                return {
                                    url: image,
                                    size: 120,
                                }
                            })}></ImageList>
                        )
                    }
                </Descriptions.Item>
            </Descriptions>
        </Container>
    );
}

const EmptyContainer = styled.div`
    height: 100%;
    width: 100%;
    padding: 10px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
`;

const Container = styled.div`
    height: 100%;
    width: 100%;
    padding: 6px;
`;

const Title = styled.div`
    display: flex;
    line-height: 25px;
    font-size: 16px;
    gap:10px;
`;

const Icon = styled.img`
    width: 25px;
    height:25px;
`;

const CategoryItem = styled.div`
`;
